import type { Ref } from 'vue';
import type { CardQueryParams, SearchConfigDealItem } from '/@/api/general/model/cardModel';
import type { DropdownItemOption } from 'vant/lib/dropdown-item/types';
import { SearchLogicTypeEnum } from '/@/api/general/model/cardModel';
import { defineComponent, unref } from 'vue';
import setting from '/@/settings/projectSetting';
import { useVModels } from '@vueuse/core';
import { useGeneralGameHooks } from '/@/views/general/hooks/useConfigs';
import { Popup } from 'vant';
import { includes } from 'lodash-es';

import('./CurrentAttrPopup.less');

export default defineComponent({
  name: 'CurrentAttrPopup',
  props: {
    show: {
      type: Boolean as PropType<boolean>,
      required: true,
      default: () => {
        return false;
      },
    },
    queryState: {
      type: Object as PropType<CardQueryParams>,
      required: true,
    },
    currentAttrs: {
      type: Object as PropType<Ref<SearchConfigDealItem>>,
      required: true,
    },
  },
  emits: ['update:show', 'pageRefresh'],
  setup(props, { emit }) {
    const { show } = useVModels(props, emit);

    const { gameConfigData } = useGeneralGameHooks();

    const multipleClick = (item: DropdownItemOption, key: string) => {
      const { queryState } = props;
      const selectValue = item.value as string;
      !queryState[key] ? (queryState[key] = []) : null;
      const keyOptions = queryState[key];
      if (keyOptions.includes(selectValue)) {
        const index = keyOptions.indexOf(selectValue);
        keyOptions?.splice(index, 1);
      } else {
        keyOptions?.push(selectValue);
      }
      emit('pageRefresh');
    };

    const singleClick = (item: DropdownItemOption, key: string) => {
      const { queryState } = props;
      const selectValue = item.value as string;
      !queryState[key] ? (queryState[key] = []) : null;
      const keyOptions = queryState[key];
      if (keyOptions.includes(selectValue)) {
        const index = keyOptions.indexOf(selectValue);
        keyOptions?.splice(index, 1);
      } else {
        keyOptions.length = 0;
        keyOptions?.push(selectValue);
      }
      emit('pageRefresh');
    };

    // 生成筛选项
    const CustomAttrBox = () => {
      const { currentAttrs, queryState } = props;
      const ItemArray: VueNode[] = [];
      const item = unref(currentAttrs);
      const { mapping } = item;

      mapping.map((mapItem) => {
        const isActive = includes(queryState[item.attr_key] || [], mapItem.value);
        // 如果是图片
        if (mapItem.icon) {
          ItemArray.push(
            <li
              class={['box-img-item', { active: isActive }]}
              onClick={() => {
                item.search_logic === SearchLogicTypeEnum.NO
                  ? singleClick(mapItem, item.attr_key)
                  : multipleClick(mapItem, item.attr_key);
              }}
            >
              <img src={mapItem.icon} alt='' />
            </li>
          );
        } else {
          const borderColor = gameConfigData.game_color;
          let textColor = gameConfigData.game_color;
          let bgColor = 'transparent';
          if (isActive) {
            textColor = '#fff';
            bgColor = gameConfigData.game_color;
          }
          ItemArray.push(
            <li
              class={['box-item text-sm', { active: isActive }]}
              onClick={() => {
                item.search_logic === SearchLogicTypeEnum.NO
                  ? singleClick(mapItem, item.attr_key)
                  : multipleClick(mapItem, item.attr_key);
              }}
              style={{ borderColor: borderColor, color: textColor, background: bgColor }}
            >
              <span>{mapItem.text}</span>
            </li>
          );
        }
      });
      return <ul class={'box-list flex flex-wrap'}>{ItemArray}</ul>;
    };

    return () => (
      <Popup
        class='general-search-attrs-popup'
        v-model={[show.value, 'show']}
        style={{ width: '82%', height: '56%', top: '58%', background: '#F9F9F9', zIndex: setting.PageTitleZIndex - 1 }}
        overlayStyle={{ zIndex: setting.PageTitleZIndex - 1 }}
        closeable={true}
        teleport={'body'}
      >
        <div class={'text-base text-center'}>{props.currentAttrs.value.title}选择</div>
        <div class={'h-[86%] overflow-y-auto pt-sm'}>
          <CustomAttrBox />
        </div>
      </Popup>
    );
  },
});
